import { useState } from 'react'
import { Button, Table, message } from 'antd'

const mockData = [
  { id: 1, code: 'INV-1234', status: '未使用', createdAt: '2023-01-01', usedAt: '-' },
  { id: 2, code: 'INV-5678', status: '已使用', createdAt: '2023-01-02', usedAt: '2023-01-05' }
]

const columns = [
  { title: '邀请码', dataIndex: 'code' },
  { title: '状态', dataIndex: 'status' },
  { title: '创建时间', dataIndex: 'createdAt' },
  { title: '使用时间', dataIndex: 'usedAt' }
]

export default function Invites() {
  const [generating, setGenerating] = useState(false)
  const [data, setData] = useState(mockData)

  const generateCode = () => {
    setGenerating(true)
    setTimeout(() => {
      const newCode = {
        id: data.length + 1,
        code: `INV-${Math.floor(Math.random() * 9000 + 1000)}`,
        status: '未使用',
        createdAt: new Date().toLocaleDateString(),
        usedAt: '-'
      }
      setData([...data, newCode])
      message.success(`生成成功：${newCode.code}`)
      setGenerating(false)
    }, 500)
  }

  return (
    <div className="invite-manage">
      <Button 
        type="primary" 
        onClick={generateCode}
        loading={generating}
        style={{ marginBottom: 16 }}
      >
        生成新邀请码
      </Button>
      
      <Table
        columns={columns}
        rowKey="id"
        dataSource={data}
        pagination={{ pageSize: 5 }}
      />
    </div>
  )
}